<div class="attr-method">
  <div class="attr-list">
    <h4>属性列表</h4>
    <div class="btn-wrap">
      <button class="btn btn-info" (click)="getValue()">获取控件值value</button>
      <button class="btn btn-info" (click)="getDisabled()">获取是否禁用值disabled</button>
      <button class="btn btn-info" (click)="getEnabled()">获取是否启用值enabled</button>
      <button class="btn btn-info" (click)="getInValid()">获取是否无效值invalid</button>
      <button class="btn btn-info" (click)="getValid()">获取是否有效值valid</button>
      <button class="btn btn-info" (click)="getPristine()">获取是否未修改过控件pristine值</button>
      <button class="btn btn-info" (click)="getDirty()">获取是否修改过控件dirty值</button>
      <button class="btn btn-info" (click)="getUntouched()">获取是否未触发过控件untouched值</button>
      <button class="btn btn-info" (click)="getTouched()">获取是否触发过控件touched值</button>
      <button class="btn btn-info" (click)="getParentControl()">获取父控件parent值</button>
      <button class="btn btn-info" (click)="getRootControl()">获取根控件root值</button>
      <button class="btn btn-info" (click)="getErrors()">获取校验失败的errors值</button>
      <button class="btn btn-info" (click)="getValidator()">获取同步校验器validator值</button>
      <button class="btn btn-info" (click)="getValueChanges()">获取并监听valueChanges值变化事件</button>
      <button class="btn btn-info" (click)="getStatusChanges()">获取并监听statusChanges状态变化事件</button>
    </div>
    <div class="result">
      <p>属性输出值</p>
      <textarea class="form-control" rows="3" [(ngModel)]="attrOutput"></textarea>
    </div>
  </div>

  <div class="method-list">
    <h4>方法列表</h4>
    <div class="btn-wrap">
      <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button" (click)="setValidators(formControlRegExp.value)">设置FormControl同步校验器</button>
          </span>
        <input type="text" class="form-control" placeholder="请输入正则表达式，例如/胡教头/i" #formControlRegExp>
      </div>
      <div class="input-group">
          <span class="input-group-btn">
            <button class="btn btn-info" type="button" (click)="setValue(formControlValue.value)">设置FormControl的value值</button>
          </span>
        <input type="text" class="form-control" placeholder="请设置该控件的值" #formControlValue>
      </div>

      <nz-select
        nzAllowClear
        nzPlaceHolder="请选择启用控件方式"
        name="disable"
        [(ngModel)]="enableValue"
        (ngModelChange)="handleEnableValueChange($event)"
      >
        <nz-option [nzValue]="" nzLabel="请选择启用控件方式"></nz-option>
        <nz-option [nzValue]="{onlySelf: false}" nzLabel="触发祖先status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{onlySelf: true}" nzLabel="不触发祖先status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{emitEvent: true}" nzLabel="触发自身status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{emitEvent: false}" nzLabel="不触发自身status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{onlySelf: true, emitEvent: false}" nzLabel="两者均不触发"></nz-option>
      </nz-select>
      <nz-select
        nzAllowClear
        nzPlaceHolder="请选择禁用控件方式"
        name="disable"
        [(ngModel)]="disableValue"
        (ngModelChange)="handleDisableValueChange($event)"
      >
        <nz-option [nzValue]="" nzLabel="请选择禁用控件方式"></nz-option>
        <nz-option [nzValue]="{onlySelf: false}" nzLabel="触发祖先status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{onlySelf: true}" nzLabel="不触发祖先status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{emitEvent: true}" nzLabel="触发自身status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{emitEvent: false}" nzLabel="不触发自身status和value的changes事件"></nz-option>
        <nz-option [nzValue]="{onlySelf: true, emitEvent: false}" nzLabel="两者均不触发"></nz-option>
      </nz-select>
      <nz-tree-select
        name="parentNode"
        [nzNodes]="formTree['formGroup']"
        [nzExpandedKeys]="formTree['formGroupExpandKeys']"
        nzPlaceHolder="请选择父控件"
        [(ngModel)]="parentNodeName"
        (ngModelChange)="handleSetParentChange($event)"
      >
      </nz-tree-select>
      <button class="btn btn-info" (click)="clearValidators()">清空同步校验器clearValidators()</button>
      <button class="btn btn-info" (click)="markAsTouched()">标记控件为touched</button>
      <button class="btn btn-info" (click)="markAsUntouched()">标记控件为untouched</button>
<!--      <button class="btn btn-info" (click)="patchValue()">设置各控件的值patchValue()</button>-->
      <!--        <button class="btn btn-info" (click)="setFormGroupValidators()">设置FormGroup同步校验器</button>-->
      <!--        <button class="btn btn-info" (click)="setFormControlValidators('/sowhat/i')">设置FormControl同步校验器</button>-->
      <!--        <button class="btn btn-info">设置异步校验器</button>-->
      <!--        <button class="btn btn-info">清空同步校验器</button>-->
      <!--        <button class="btn btn-info">清空异步校验器</button>-->
      <!--        <button class="btn btn-info">禁用控件</button>-->
      <!--        <button class="btn btn-info">启用控件</button>-->
      <!--        <button class="btn btn-info">设置父控件</button>-->
      <!--        <button class="btn btn-info">设置控件值</button>-->
      <!--        <button class="btn btn-info">修补控件值</button>-->
      <!--        <button class="btn btn-info">重置控件</button>-->
    </div>
    <div class="result">
      <p>方法返回值</p>
      <textarea class="form-control" rows="3" [(ngModel)]="methodOutput"></textarea>
    </div>
  </div>
</div>

<!--<nz-modal [(nzVisible)]="isModalVisible" nzTitle="The first Modal" (nzOnCancel)="handleModalCancel()" (nzOnOk)="handleModalOk()">-->
<!--  <p>Content one</p>-->
<!--  <p>Content two</p>-->
<!--  <p>Content three</p>-->
<!--</nz-modal>-->
